<template>
  <div class="login-box">
	 <!-- 顶部菜单栏 -->
     <div class="login-header">
      <van-icon  name="wap-home-o" size="22" @click="toHome" />
      <span class="header-title">网易严选</span>
      <div class="header-right">
        <van-icon name="search" size="22" />
        <van-icon name="shopping-cart-o" size="22" />
      </div>
    </div>
    <!-- 轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="2000"
      indicator-color="white"
      height="375"
    >
      <van-swipe-item v-for="imgList in info.skuInfo.skuImageList"
        :key="imgList.id"><img :src="imgList.imgUrl"
      /></van-swipe-item>
    </van-swipe>
    <!-- 价格 -->
    <div class="col">
      <div class="head">
        每日抄底 <span>|</span>距离结束<span
          ><van-count-down
            class="count"
            millisecond
            :time="time"
            format="mm:ss:SS"
        /></span>
      </div>
      <div class="priceArea">{{ info.skuInfo.price }}￥</div>
    </div>
    <!-- 广告栏 -->
    <div class="notice">
      <van-notice-bar mode="closeable">Pro会员立享免邮，再省¥99</van-notice-bar>
    </div>
    <!--商品名称 -->
    <div class="name">{{ info.skuInfo.skuName }}</div>
    <!-- 购买 -->
    <div class="detailFooter">
		<button class="icon"><img class="service" src="http://yanxuan-static.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/detail-kefu-d10f0489d2.png?imageView&type=webp"></img></button>
		<button class="buyNow">立即购买</button>
		<button class="addShopCart" @click="handleAddCart">加入购物车</button>
	</div>
    <!-- 详情介绍 -->
    <div class="recommendReason">
      <p>{{info.skuInfo.skuDesc}}</p>
    </div>
    <!-- 最大图片 -->
    <img style="width: 375px" :src="info.skuInfo.skuDefaultImg" />
  </div>
</template>

<script>
import { Toast } from 'vant'
import { reqGoodDetailInfo,reqAddGood2Cart} from "@/api";
export default {
  name: "",
  data() {
    return {
      time: 30 * 60 * 1000,
      info: {
        price: 0, //价格
        skuInfo: {}, //商品详细信息
        spuSaleAttrList: [], //商品属性列表（颜色、尺寸、重量等等）
      },
      goodNum:1,
    };
  },
  methods: {
    //获取详情参数
    async getGoodDetailInfo() {
      const { id } = this.$route.query;
      const result = await reqGoodDetailInfo(id);
      // 根据code判断数据是否获取成功
      if (result.code === 200) {
        // 去除掉不需要的数据
        delete result.data.valuesSkuJson;
        //存储参数
        Object.assign(this.info, result.data);
      } else {
        alert(result.message);
      }
    },
    			// 添加购物车按钮的回调
			async handleAddCart(){
				// 获取路由传递过来的商品id
				const {id} = this.$route.query
				// 获取组件“辛辛苦苦”维护出来的商品数量
				const {goodNum} = this
				// 请求添加购物车
				const result = await reqAddGood2Cart(id,goodNum)
				// 判断业务逻辑是否成功
				if(result.code === 200){
          Toast.success('添加成功');
					this.$router.push('/cart')
				}else{
          Toast.fail('添加失败');
					alert(result.message)
				}
      }
  },
  mounted() {
    this.getGoodDetailInfo();
  },
};
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.cartImg {
  display: block;
  width: 134px;
  height: 45px;
  margin: 80px auto;
}
.login-box {
  height: 100%;
  width: 100%;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
  .my-swipe img {
    width: 100%;
    height: 100%;
  }
  .login-header {
    padding: 0 8px 0 12px;
    display: flex;
    background-color: white;
    align-items: center;
    align-content: flex-start;
    justify-content: space-between;
    height: 44px;
    border-bottom: 1px solid #f9f9f9;
    // &.van-icon{
    // 	margin-right: 50px;
    // }
    .header-title {
      height: 27px;
      line-height: 27px;
      font-size: 18px;
      font-weight: bolder;
      margin-left: 45px;
    }
    .header-right {
      .van-icon {
        margin-right: 10px;
      }
    }
  }
  .col {
    width: 100%;
    height: 74px;
    background: rgb(250, 30, 50);
    .head {
      font-size: 14px;
      padding: 10px 0 0 10px;
      color: #fff;
    }
    .head span {
      margin: 0 5px;
    }
    .count {
      width: 55px;
      color: #fff;
      display: inline;
    }
    .priceArea {
      font-weight: 700;
      margin: 10px 0 0 10px;
      color: #fff;
      white-space: nowrap;
    }
  }
  .notice {
    width: 100%px;
    height: 40px;
    margin: 15px 10px 0 10px;
  }
  .name {
    font-size: 16px;
    color: #333;
    height: 48px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 48px;
    margin: 15px 10px 0 10px;
    font-weight: 700;
  }
  .detailFooter {
    height: 50px;
    line-height: 50px;
    background: #fff;

    border-bottom: 1px solid #eeeeee;
    display: flex;
    justify-content: space-between;
    .icon {
      width: 76px;
      height: 50px;
      border-right: 1px solid #eeeeee;
      .service {
        width: 30px;
        height: 30px;
        margin: 10px 20px;
      }
    }
    .buyNow {
      width: 153px;
      height: 50px;
      font-size: 16px;
      border-top: 1px solid #eeeeee;
      background-color: #fff;
    }
    .addShopCart {
      width: 152px;
      height: 50px;
      font-size: 16px;
      color: #fff;
      background-color: #dd1a21;
    }
  }
  .recommendReason {
    width: 345px;
    height: 150px;
    margin: 15px auto;
    background: #fafafa;
    border: 1px solid #e6e6e6;
  }
  .recommendReason p {
    
    width: 100%;
    line-height: 25px;
    overflow: hidden;
    font-size: 14px;
    text-align: left;
  }
}
</style>